﻿<script lang="ts" setup name="goodsModel">
import { ref, reactive, onMounted } from "vue";
import { auth } from '/@/utils/authFunction';
import { ElMessageBox, ElMessage } from "element-plus";
import { downloadStreamFile } from "/@/utils/download";
import { useGoodsModelApi } from '/@/api/Goods/Details/goodsModel';
import { useGoodsTypeModelApi } from '/@/api/Goods/goodsTypeModel';
import { useSyssupplierApi } from '/@/api/interacting/syssupplier';
import { useSyscustomerApi } from '/@/api/interacting/syscustomer';
import { useWarehouseModelApi } from '/@/api/interacting/warehouse/warehouseModel';
import { useWarePlaceModelApi } from '/@/api/interacting/warehouse/warePlaceModel';
import { getDictDataList } from '/@/api/system/admin';
import { getUserList, type UserListItem } from '/@/api/customer/userList';
import editDialog from '/@/views/Goods/Details/goodsModel/component/editDialog.vue'
import detailDialog from '/@/views/Goods/Details/goodsModel/component/detailDialog.vue'
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import ImportData from "/@/components/table/importData.vue";

const goodsModelApi = useGoodsModelApi();
const goodsTypeModelApi = useGoodsTypeModelApi();
const syssupplierApi = useSyssupplierApi();
const syscustomerApi = useSyscustomerApi();
const warehouseModelApi = useWarehouseModelApi();
const warePlaceModelApi = useWarePlaceModelApi();
const printDialogRef = ref();
const editDialogRef = ref();
const detailDialogRef = ref();
const importDataRef = ref();
const state = reactive({
  exportLoading: false,
  tableLoading: false,
  stores: {},
  showAdvanceQueryUI: false,
  dropdownData: {} as any,
  selectData: [] as any[],
  tableQueryParams: {} as any,
  tableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime', // 默认的排序字段
    order: 'descending', // 排序方向
    descStr: 'descending', // 降序排序的关键字符
  },
  tableData: [],
  customerList: [] as UserListItem[], // 客户列表
  customerLoading: false, // 客户列表加载状态
  goodsTypeList: [] as any[], // 货品类型列表
  goodsTypeTreeData: [] as any[], // 货品类型树形数据
  supplierList: [] as any[], // 供应商列表
  syscustomerList: [] as any[], // 系统客户列表
  goodsUnitList: [] as any[], // 货品单位列表
  warehouseList: [] as any[], // 仓库列表
  warePlaceList: [] as any[], // 库位列表
});

// 构建树形数据结构
const buildTreeData = (list: any[]) => {
  // 创建映射表
  const map = new Map();
  const roots: any[] = [];
  
  // 首先创建所有节点
  list.forEach(item => {
    map.set(item.id, {
      value: item.id,
      label: `${item.goodsTypeCode} - ${item.goodsTypeName}`,
      id: item.id,
      goodsParentId: item.goodsParentId,
      children: []
    });
  });
  
  // 然后建立父子关系
  list.forEach(item => {
    const node = map.get(item.id);
    if (item.goodsParentId && map.has(item.goodsParentId)) {
      // 有父节点，添加到父节点的children中
      const parent = map.get(item.goodsParentId);
      parent.children.push(node);
    } else {
      // 没有父节点或父节点不存在，作为根节点
      roots.push(node);
    }
  });
  
  // 清理空的children数组
  const cleanEmptyChildren = (nodes: any[]) => {
    nodes.forEach(node => {
      if (node.children && node.children.length === 0) {
        delete node.children;
      } else if (node.children && node.children.length > 0) {
        cleanEmptyChildren(node.children);
      }
    });
  };
  cleanEmptyChildren(roots);
  
  return roots;
};

// 加载客户列表
const loadCustomerList = async () => {
  try {
    state.customerLoading = true;
    const response = await getUserList();
    state.customerList = response.data || [];
  } catch (error) {
    console.error('加载客户列表失败:', error);
    ElMessage.error('加载客户列表失败');
  } finally {
    state.customerLoading = false;
  }
};

// 加载货品类型列表
const loadGoodsTypeList = async () => {
  try {
    const res = await goodsTypeModelApi.page({ page: 1, pageSize: 9999 });
    state.goodsTypeList = res.data.result?.items || [];
    // 构建树形结构
    state.goodsTypeTreeData = buildTreeData(state.goodsTypeList);
    console.log('货品类型列表数据:', state.goodsTypeList);
    console.log('货品类型树形数据:', state.goodsTypeTreeData);
  } catch (error) {
    console.error('加载货品类型列表失败:', error);
    ElMessage.error('加载货品类型列表失败');
  }
};

// 加载供应商列表
const loadSupplierList = async () => {
  try {
    const res = await syssupplierApi.page({ page: 1, pageSize: 9999 });
    state.supplierList = res.data.result?.items || [];
    console.log('供应商列表数据:', state.supplierList);
  } catch (error) {
    console.error('加载供应商列表失败:', error);
    ElMessage.error('加载供应商列表失败');
  }
};

// 加载系统客户列表
const loadSyscustomerList = async () => {
  try {
    const res = await syscustomerApi.page({ page: 1, pageSize: 9999 });
    state.syscustomerList = res.data.result?.items || [];
    console.log('系统客户列表数据:', state.syscustomerList);
  } catch (error) {
    console.error('加载系统客户列表失败:', error);
    ElMessage.error('加载系统客户列表失败');
  }
};

// 加载货品单位列表（从字典数据）
const loadGoodsUnitList = async () => {
  try {
    const res = await getDictDataList('GoodsEnumm');
    console.log('货品单位API响应:', res);
    // 字典数据可能在 result 或 data 中
    const dictData = res.data?.result || res.data || [];
    // 确保数据格式正确，过滤掉null或undefined的项
    state.goodsUnitList = Array.isArray(dictData) 
      ? dictData.filter(item => item && (item.value !== null && item.value !== undefined))
      : [];
    console.log('货品单位列表数据:', state.goodsUnitList);
  } catch (error) {
    console.error('加载货品单位列表失败:', error);
    ElMessage.error('加载货品单位列表失败');
    state.goodsUnitList = [];
  }
};

// 加载仓库列表
const loadWarehouseList = async () => {
  try {
    const res = await warehouseModelApi.page({ page: 1, pageSize: 9999 });
    state.warehouseList = res.data.result?.items || [];
    console.log('仓库列表数据:', state.warehouseList);
  } catch (error) {
    console.error('加载仓库列表失败:', error);
    ElMessage.error('加载仓库列表失败');
  }
};

// 加载库位列表
const loadWarePlaceList = async () => {
  try {
    const res = await warePlaceModelApi.page({ page: 1, pageSize: 9999 });
    state.warePlaceList = res.data.result?.items || [];
    console.log('库位列表数据:', state.warePlaceList);
  } catch (error) {
    console.error('加载库位列表失败:', error);
    ElMessage.error('加载库位列表失败');
  }
};

// 根据ID获取货品类型名称
const getGoodsTypeName = (goodsTypeId: any) => {
  if (!goodsTypeId) return '';
  const goodsType = state.goodsTypeList.find(item => item.id == goodsTypeId);
  return goodsType ? goodsType.goodsTypeName : goodsTypeId;
};

// 根据ID获取供应商名称
const getSupplierName = (supplierId: any) => {
  if (!supplierId) return '';
  const supplier = state.supplierList.find(item => item.id == supplierId);
  return supplier ? supplier.name : '';
};

// 根据ID获取客户名称
const getCustomerName = (customerId: any) => {
  if (!customerId) return '';
  const customer = state.syscustomerList.find(item => item.id == customerId);
  return customer ? customer.customerName : customerId;
};

// 根据ID获取货品单位名称
const getGoodsUnitName = (unitId: any) => {
  if (!unitId) return '';
  const unit = state.goodsUnitList.find(item => (item?.value == unitId || item?.id == unitId));
  return unit ? (unit.label || unit.name) : '';
};

// 根据ID获取仓库名称
const getWarehouseName = (wareId: any) => {
  if (!wareId) return '';
  const warehouse = state.warehouseList.find(item => item.id == wareId);
  return warehouse ? warehouse.wareName : '';
};

// 根据仓库ID获取该仓库的库位信息
const getWarehouseWarePlaces = (wareId: any) => {
  if (!wareId) return '未分配库位';
  
  // 找到对应的仓库
  const warehouse = state.warehouseList.find(item => item.id == wareId);
  if (!warehouse || !warehouse.warePlaceId) {
    return '未分配库位';
  }
  
  // 解析仓库的库位ID（支持逗号分隔的多个库位）
  const warePlaceIds = typeof warehouse.warePlaceId === 'string' 
    ? warehouse.warePlaceId.split(',').map(id => id.trim()).filter(id => id)
    : Array.isArray(warehouse.warePlaceId) 
    ? warehouse.warePlaceId 
    : [warehouse.warePlaceId];
  
  // 查找对应的库位信息
  const warePlaceNames = warePlaceIds.map(id => {
    const warePlace = state.warePlaceList.find(item => 
      String(item.id) === String(id) || item.id == id
    );
    return warePlace ? `${warePlace.warePlaceCode} - ${warePlace.warePlaceName}` : `库位ID: ${id}`;
  });
  
  return warePlaceNames.join(', ');
};

// 获取图片URL
const getImageUrl = (fileInfo: any) => {
  if (!fileInfo) return '';
  // 如果已经是完整URL或路径，直接返回
  if (typeof fileInfo === 'string') {
    if (fileInfo.startsWith('http') || fileInfo.startsWith('/')) {
      return fileInfo;
    }
    // 否则作为ID或路径处理
    return `/${fileInfo}`;
  }
  return '';
};

// 页面加载时
onMounted(async () => {
  await loadCustomerList();
  await loadGoodsTypeList();
  await loadSupplierList();
  await loadSyscustomerList();
  await loadGoodsUnitList();
  await loadWarehouseList();
  await loadWarePlaceList();
});

// 合并保质期查询数据
const combineExpirationQueryData = (num: string, unit: string) => {
  if (!num) return '';
  if (!unit) return num;
  return `${num}${unit}`;
};

// 查询操作
const handleQuery = async (params: any = {}) => {
  state.tableLoading = true;
  state.tableParams = Object.assign(state.tableParams, params);
  
  // 处理查询参数，合并保质期数据
  let queryParams = { ...state.tableQueryParams };
  if (queryParams.goodsExpirationNum || queryParams.goodsExpirationUnit) {
    queryParams.goodsExpirationNum = combineExpirationQueryData(
      queryParams.goodsExpirationNum || '', 
      queryParams.goodsExpirationUnit || ''
    );
  }
  // 删除临时的单位字段
  delete queryParams.goodsExpirationUnit;
  
  const result = await goodsModelApi.page(Object.assign(queryParams, state.tableParams)).then(res => res.data.result);
  state.tableParams.total = result?.total;
  state.tableData = result?.items ?? [];
  state.tableLoading = false;
};

// 列排序
const sortChange = async (column: any) => {
  state.tableParams.field = column.prop;
  state.tableParams.order = column.order;
  await handleQuery();
};

// 删除
const delGoodsModel = (row: any) => {
  ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await goodsModelApi.delete({ id: row.id });
    handleQuery();
    ElMessage.success("删除成功");
  }).catch(() => {});
};

// 批量删除
const batchDelGoodsModel = () => {
  ElMessageBox.confirm(`确定要删除${state.selectData.length}条记录吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await goodsModelApi.batchDelete(state.selectData.map(u => ({ id: u.id }) )).then(res => {
      ElMessage.success(`成功批量删除${res.data.result}条记录`);
      handleQuery();
    });
  }).catch(() => {});
};

// 导出数据
const exportGoodsModelCommand = async (command: string) => {
  try {
    state.exportLoading = true;
    if (command === 'select') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map(u => u.id) });
      await goodsModelApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'current') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams);
      await goodsModelApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'all') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
      await goodsModelApi.exportData(params).then(res => downloadStreamFile(res));
    }
  } finally {
    state.exportLoading = false;
  }
}

handleQuery();
</script>
<template>
  <div class="goodsModel-container" v-loading="state.exportLoading">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> 
      <el-form :model="state.tableQueryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="state.tableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品编码">
              <el-input v-model="state.tableQueryParams.goodsCode" clearable placeholder="请输入货品编码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品名称">
              <el-input v-model="state.tableQueryParams.goodsName" clearable placeholder="请输入货品名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品类型">
              <el-tree-select 
                v-model="state.tableQueryParams.goodsTypeId" 
                :data="state.goodsTypeTreeData"
                placeholder="请选择货品类型"
                clearable
                filterable
                check-strictly
                :render-after-expand="false"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品规格型号">
              <el-input v-model="state.tableQueryParams.goodsSpecs" clearable placeholder="请输入货品规格型号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="供应商编号">
              <el-input v-model="state.tableQueryParams.goodsSupplierId" clearable placeholder="请输入供应商编号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="客户编号">
              <el-input v-model="state.tableQueryParams.goodsCustomerId" clearable placeholder="请输入客户编号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="入库参考价/元">
              <el-input-number v-model="state.tableQueryParams.goodsIntoMoney"  clearable placeholder="请输入入库参考价/元"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="出库参考价/元">
              <el-input-number v-model="state.tableQueryParams.goodsOutMoney"  clearable placeholder="请输入出库参考价/元"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品状态">
                  <el-select clearable filterable v-model="state.tableQueryParams.goodsType" placeholder="请选择货品状态"> 
                    <el-option     value="true" label="是" /> 
                    <el-option     value="false" label="否" />  
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="保质期管理">
                  <el-select clearable filterable v-model="state.tableQueryParams.goodsExpiration" placeholder="请选择保质期管理"> 
                    <el-option     value="true" label="是" /> 
                    <el-option     value="false" label="否" />  
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="保质期">
              <div style="display: flex; gap: 4px;">
                <el-input 
                  v-model="state.tableQueryParams.goodsExpirationNum" 
                  clearable 
                  placeholder="请输入保质期"
                  style="flex: 1;"
                />
                <el-select 
                  v-model="state.tableQueryParams.goodsExpirationUnit" 
                  placeholder="单位"
                  style="width: 60px;"
                  clearable
                >
                  <el-option label="天" value="天" />
                  <el-option label="月" value="月" />
                  <el-option label="年" value="年" />
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="预警天数">
              <el-input-number v-model="state.tableQueryParams.goodsWarning"  clearable placeholder="请输入预警天数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品备注">
              <el-input v-model="state.tableQueryParams.goodsNote" clearable placeholder="请输入货品备注"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品单位">
              <el-select v-model="state.tableQueryParams.goodsUnitId" clearable filterable placeholder="请选择货品单位">
                <el-option v-for="item in state.goodsUnitList" :key="item?.value || item?.id" 
                  :label="item?.label || item?.name" :value="item?.value || item?.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品图片">
              <el-input v-model="state.tableQueryParams.goodsPic" clearable placeholder="请输入货品图片"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="货品仓库">
              <el-select v-model="state.tableQueryParams.goodsWareId" clearable filterable placeholder="请选择货品仓库">
                <el-option v-for="item in state.warehouseList" :key="item.id" :label="item.wareName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item >
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'goodsModel:page'" v-reclick="1000"> 查询 </el-button>
                <el-button icon="ele-Refresh" @click="() => state.tableQueryParams = {}"> 重置 </el-button>
                <el-button icon="ele-ZoomIn" @click="() => state.showAdvanceQueryUI = true" v-if="!state.showAdvanceQueryUI" style="margin-left:5px;"> 高级查询 </el-button>
                <el-button icon="ele-ZoomOut" @click="() => state.showAdvanceQueryUI = false" v-if="state.showAdvanceQueryUI" style="margin-left:5px;"> 隐藏 </el-button>
                <el-button type="danger" style="margin-left:5px;" icon="ele-Delete" @click="batchDelGoodsModel" :disabled="state.selectData.length == 0" v-auth="'goodsModel:batchDelete'"> 删除 </el-button>
                <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="editDialogRef.openDialog(null, '新增货品表')" v-auth="'goodsModel:add'"> 新增 </el-button>
                <el-dropdown :show-timeout="70" :hide-timeout="50" @command="exportGoodsModelCommand">
                  <el-button type="primary" style="margin-left:5px;" icon="ele-FolderOpened" v-reclick="20000" v-auth="'goodsModel:export'"> 导出 </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="select" :disabled="state.selectData.length == 0">导出选中</el-dropdown-item>
                      <el-dropdown-item command="current">导出本页</el-dropdown-item>
                      <el-dropdown-item command="all">导出全部</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button type="warning" style="margin-left:5px;" icon="ele-MostlyCloudy" @click="importDataRef.openDialog()" v-auth="'goodsModel:import'"> 导入 </el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table :data="state.tableData" @selection-change="(val: any[]) => { state.selectData = val; }" style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id" @sort-change="sortChange" border>
        <el-table-column type="selection" width="40" align="center" v-if="auth('goodsModel:batchDelete') || auth('goodsModel:export')" />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop='goodsCode' label='货品编码' show-overflow-tooltip>
          <template #default="scope">
            <el-button type="primary" link @click="detailDialogRef.openDialog(scope.row.id)">
              {{ scope.row.goodsCode }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop='goodsName' label='货品名称' show-overflow-tooltip />
        <el-table-column prop='goodsTypeId' label='货品类型' show-overflow-tooltip>
          <template #default="scope">
            {{ getGoodsTypeName(scope.row.goodsTypeId) }}
          </template>
        </el-table-column>
        <el-table-column prop='goodsSpecs' label='货品规格型号' show-overflow-tooltip />
        <el-table-column prop='goodsSupplierId' label='供应商' show-overflow-tooltip>
          <template #default="scope">
            {{ getSupplierName(scope.row.goodsSupplierId) }}
          </template>
        </el-table-column>
        <el-table-column prop='goodsCustomerId' label='客户' show-overflow-tooltip>
          <template #default="scope">
            {{ getCustomerName(scope.row.goodsCustomerId) }}
          </template>
        </el-table-column>
        <el-table-column prop='goodsIntoMoney' label='入库参考价/元' show-overflow-tooltip />
        <el-table-column prop='goodsOutMoney' label='出库参考价/元' show-overflow-tooltip />
        <el-table-column prop='goodsType' label='货品状态' show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.goodsType"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='goodsExpiration' label='保质期管理' show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.goodsExpiration"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='goodsExpirationNum' label='保质期' show-overflow-tooltip />
        <el-table-column prop='goodsWarning' label='预警天数' show-overflow-tooltip />
        <el-table-column prop='goodsNote' label='货品备注' show-overflow-tooltip />
        <el-table-column prop='goodsUnitId' label='货品单位' show-overflow-tooltip>
          <template #default="scope">
            {{ getGoodsUnitName(scope.row.goodsUnitId) }}
          </template>
        </el-table-column>
        <el-table-column prop='goodsPic' label='货品图片' width="100" align="center">
          <template #default="scope">
            <el-image 
              v-if="scope.row.goodsPic"
              style="width: 60px; height: 60px"
              :src="getImageUrl(scope.row.goodsPic)"
              fit="contain"
              :preview-src-list="[getImageUrl(scope.row.goodsPic)]"
              :preview-teleported="true"
              lazy
            >
              <template #error>
                <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #f5f7fa; color: #909399;">
                  <el-icon><ele-Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <span v-else style="color: #999;">无图片</span>
          </template>
        </el-table-column>
        <el-table-column prop='goodsWareId' label='货品仓库' show-overflow-tooltip>
          <template #default="scope">
            {{ getWarehouseName(scope.row.goodsWareId) }}
          </template>
        </el-table-column>
        <el-table-column prop='goodsWareId' label='库位信息' show-overflow-tooltip>
          <template #default="scope">
            {{ getWarehouseWarePlaces(scope.row.goodsWareId) }}
          </template>
        </el-table-column>
        <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <ModifyRecord :data="scope.row" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip v-if="auth('goodsModel:update') || auth('goodsModel:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑货品表')" v-auth="'goodsModel:update'"> 编辑 </el-button>
            <el-button icon="ele-Delete" size="small" text type="primary" @click="delGoodsModel(scope.row)" v-auth="'goodsModel:delete'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
              v-model:currentPage="state.tableParams.page"
              v-model:page-size="state.tableParams.pageSize"
              @size-change="(val: any) => handleQuery({ pageSize: val })"
              @current-change="(val: any) => handleQuery({ page: val })"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              :total="state.tableParams.total"
              size="small"
              background />
      <ImportData ref="importDataRef" :import="goodsModelApi.importData" :download="goodsModelApi.downloadTemplate" v-auth="'goodsModel:import'" @refresh="handleQuery"/>
      <printDialog ref="printDialogRef" :title="'打印货品表'" @reloadTable="handleQuery" />
      <editDialog ref="editDialogRef" @reloadTable="handleQuery" />
      <detailDialog ref="detailDialogRef" />
    </el-card>
  </div>
</template>
<style scoped>
:deep(.el-input), :deep(.el-select), :deep(.el-input-number) {
  width: 100%;
}
</style>